<template>
  <div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll">
    <div class="scroll-wrapper" ref="scrollWrapper" :style="{top: top + 'px'}">
      <slot></slot>
    </div>
  </div>
</template>

<script>
    const delta = 15

    export default {
        name: 'scrollBar',
        data() {
            return {
                top: 0
            }
        },
        methods: {
            handleScroll(e) {
                const eventDelta = e.wheelDelta || -e.deltaY * 3
                const $container = this.$refs.scrollContainer
                const $containerHeight = $container.offsetHeight
                const $wrapper = this.$refs.scrollWrapper
                const $wrapperHeight = $wrapper.offsetHeight
                if (eventDelta > 0) {
                    this.top = Math.min(0, this.top + eventDelta)
                } else {
                    if ($containerHeight - delta < $wrapperHeight) {
                        if (this.top < -($wrapperHeight - $containerHeight + delta)) {
                            this.top = this.top
                        } else {
                            this.top = Math.max(this.top + eventDelta, $containerHeight - $wrapperHeight - delta)
                        }
                    } else {
                        this.top = 0
                    }
                }
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import '../../styles/variables.scss';

  .scroll-container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: $menuBg;

    .scroll-wrapper {
      position: absolute;
      width: 100% !important;
    }
  }
</style>
